<template>
  <div class="singer">
    <!--引入组件 -->
    <listview :data="singer"></listview>

  </div>
</template>
<script>
import {getSingerList} from  '@/api/singer.js';
import {common} from '@/util/common.js';
import axios from '@/util/axios.js';
import Singer from '@/js/singer.js';
//中英文转换
import han from 'han';
//歌手列表
import listview from '@/components/base/listview/listview.vue';

let HOT_NAME = '热门';
let HOT_SINGER_LEN = 10;
let name_arr = []; //临时集合

export default {
  data() {
    return {
      singer: [],
      key: [], // 字母key
      listData: [] // 列表数据
    };
  },
  created() {
    this._getSingerList();
  },
  components: {
    listview
  },
  computed: {
    
  },
  methods: {
    // 方法一
    _getSingerList() {
      console.log('----开始执行singerList的集合----');
      getSingerList().then((res) => {
        if (res.code === common.SUCC_OK) {
          this.listData = res.singerList.data.singerlist;
          this.key = res.singerList.data.tags.index;
          // 封装数据结构
          this.singer = this. _initDataConstruct(this.listData, this.key);
          //console.log(this.singer);
        }
      });
    },

    //方法二:网易云音乐 NodeJS 版API
    _getSingerList2: async function () {
      const  res = await axios.post('/toplist/artist');
      console.log(res);
    },
    
    // 封装数据结构
    _initDataConstruct(list,keys) {
      //定义一个map对象
      let map = {
        // hot对象
        hot: {
          id: HOT_NAME,
          items:[] //热门数据
        }
      }

      // 循环原生数据
      list.forEach((item,index) => {
        if(index < HOT_SINGER_LEN) {
          // map.hot.items.push({
          //   singer_id : item.singer_id,
          //   singer_name: item.singer_name,
          //   singer_pic:`http://y.gtimg.cn/music/photo_new/T001R150x150M000${item.singer_mid}.webp`
          // });
          // 通过new singer类封装对象
        map.hot.items.push(new Singer({
            id : item.singer_id,
            name: item.singer_name,
            mid: item.singer_mid
          }));
        }

        // 将list的数据依照ASCII存放到name_arr集合中
        name_arr.push({
            id : item.singer_id,
            han_name: han.letter(item.singer_name),
            name:item.singer_name,
            mid: item.singer_mid
        });
      });
      
      // 获取聚类
      keys.forEach((item) => {
          const key = item.name;
          const id = item.id;
          // 若不存在  
          if(!map[key] && id > 0 ){
            map[key] = {
              id: key,
              items:[]
            }

            name_arr.map((nameItem,index) => {
              let tempName = nameItem.han_name;
              //console.log(index,nameItem.han_name,tempName.toUpperCase().substring(0,1),key,tempName.toUpperCase().substring(0,1) === key);
              if(tempName.toUpperCase().substr(0,1) === key){
               map[key].items.push(new Singer({
                id : nameItem.id,
                name: nameItem.name,
                mid: nameItem.mid
              }));
              // name_arr.splice(index,1);//改变原数组,为啥结果不对呢?
              }
            })
          }
      }); 
     //console.log(map);
      //为了得到有序列表 我们需要处理map
    let hot = [];
    let ret = [];
    for(let key in map){
      let val = map[key];
      if(val.id.match(/[a-zA-Z]/) && val.items.length > 0) {
        ret.push(val);
      }else if (val.id === HOT_NAME) {
        hot.push(val);
      }
    }
    //数组sort进行排序
    ret.sort((a,b) => {
      return a.id.charCodeAt(0) - b.id.charCodeAt(0)
    })

    // 返回一维数组
    return hot.concat(ret);
   }
  }
};

</script>
<style lang="scss" rel="stylesheet/scss">
  @import "@/assets/style/mixin.scss";
.singer {
  position: fixed;
  top: 88px;
  width: 100%;
  bottom: 0;
}
</style>
